<include file="Public:header"/>
<body data-tuktuk="boxes">
<include file="Public:left"/>
<style>
    .nav_li {
        height: 80px;
        text-align: center;
        line-height: 45px;
        min-width: 80px;
        padding: 0 10px;
        margin-right: 4px;
        margin-bottom: 4px;
        float: left;
    }
</style>
<include file="Public:aside"/>


    <section>
        <include file="Public:nav" />
        <hr />
        <article class="padding scroll">
            <div class="margin-bottom">
                <h4 class="text book inline">页面导航设计</h4>  
                <div class="on-right">
                  <a href="{:U('Admin/Nav/index')}" class="button theme small " >导航管理</a>
                  <a href="{:U('Admin/Templates/index')}" class="button small " >主题选择</a>
                </div>              
            </div>
            <hr />
            <div class="padding bck theme ">
                点击左边的预览界面刷新按钮,可以试试查看效果.
            </div>

            <div class="margin-index margin-top">
            <hr />
                <h5 class="text book inline">首页</h5>
            <hr />
                <div class="inline index-nav-box">
                    <div class="nav_li bck light add-index-nav">
                      <div>&nbsp;</div>
                      <a nav-open="index" data-tuktuk-modal="navs-modal"  href="#" class="icon plus small">添加</a>
                    </div>
                </div>
            </div>


            <div class="margin-aside margin-top">
            <hr />
                <h5 class="text book inline">侧边栏</h5>
            <hr />
                <div class="inline aside-nav-box">
                    <div class="nav_li bck light add-aside-nav">
                      <div>&nbsp;</div>
                      <a nav-open="aside" data-tuktuk-modal="navs-modal"  href="#" class="icon plus small">添加</a>
                    </div>
                </div>
            </div>
            
            
            <div class="margin-bottom margin-top">
            <hr />
                <h5 class="text book inline">菜单栏</h5>
            <hr />
                <div class="inline menu-nav-box">
                    <div class="nav_li bck light add-bottom-nav">
                      <div>&nbsp;</div>
                      <a nav-open="menu" data-tuktuk-modal="navs-modal"  href="#" class=" icon plus small">添加</a>
                    </div>
                </div>
            </div>

            <div class="margin-bottom margin-top">
            <hr />
                <h5 class="text book inline">底部导航</h5>
            <hr />
                <div class="inline bottom-nav-box">
                    <div class="nav_li bck light add-bottom-nav">
                      <div>&nbsp;</div>
                      <a nav-open="bottom" data-tuktuk-modal="navs-modal"  href="#" class="icon plus small">添加</a>
                    </div>
                </div>
            </div>
        </article>
        <footer class="bck dark text center">
            Powered by <a href="http://www.weiduniang.com" class="color theme text bold">Weiduniang</a>
        </footer>
    </section>
</body>

<div id="navs-modal" data-tuktuk="modal" class="column_10">
    <header>
        <h4 class="text book inline">导航列表</h4>
        <button data-modal="close" class="transparent small on-right inline icon remove"></button>
    </header>
    <article navs-modal-list >
      <div class="list-box inline"></div>
      <div class="index-list-box inline hide"></div>
    </article>
</div>

<load href="__PUBLIC__/js/app.js" />
<script type="text/javascript">
$(function(){
  var upurl = "{:U('Admin/Nav/updateField')}";
  var navOpen = 'bottom';
  var fname = 'pos';
  var navs_arr = eval('({$navs_json})');

  var navs = {};


  $(navs_arr).each(function(idx,el){
    navs[el['id']] = el;

    if (el['show_index'] == '1') {
      var nav_el = create_item(el,'del');
      $('[nav-open=index]').parent().before(nav_el);
    }else{
      var nav_el = create_item(el);
      $('[navs-modal-list]').find('.index-list-box').append(nav_el);
    }


    if (el['pos'] == 'bottom') {
      var nav_el = create_item(el,'del');
      $('[nav-open=bottom]').parent().before(nav_el);
    }else if(el['pos'] == 'menu'){
      var nav_el = create_item(el,'del');
      $('[nav-open=menu]').parent().before(nav_el);
    }else if(el['pos'] == 'aside'){
      var nav_el = create_item(el,'del');
      $('[nav-open=aside]').parent().before(nav_el);
    }else{
      var nav_el = create_item(el);
      $('[navs-modal-list]').find('.list-box').append(nav_el);
    }
  })

  $('body').on('click','[add-nav]',function(e){
    TukTuk.Modal.loading();
    e.preventDefault();
    var $nav_el = $(this).parent();
    var nav_el_id = $nav_el.attr('nav-id');

    var nav_el = create_item(navs[nav_el_id],'del');
    if (navOpen == 'index') fname = 'show_index';
    $.post(upurl,{name:fname,value:navOpen,pk:nav_el_id},function(){
      TukTuk.Modal.hide();
      $('[nav-open='+navOpen+']').parent().before(nav_el);
      $nav_el.remove();
      TukTuk.Modal.hide();
    })
    

  })

  $('body').on('click','a[nav-open]',function(e){
    e.preventDefault();
    navOpen = $(this).attr('nav-open');
    if (navOpen == 'index') {
      $('.index-list-box').show();
      $('.list-box').hide();
    }else{
      $('.index-list-box').hide();
      $('.list-box').show();

    }
    
  })


  $('body').on('click','[delete-nav]',function(e){
    TukTuk.Modal.loading();
    e.preventDefault();
    var $nav_el = $(this).parent();
    var nav_el_id = $nav_el.attr('nav-id');
    if (navOpen == 'index') fname = 'show_index';
    var nav_el = create_item(navs[nav_el_id]);
    $.post(upurl,{name:fname,value:'-1',pk:nav_el_id},function(){
      $('[navs-modal-list]').find('.list-box').append(nav_el);
      $nav_el.remove();
      TukTuk.Modal.hide();
    })
    
  })




  function create_item (vo,type) {
    var ac = "<a nav-id="+vo['id']+" add-nav href=\"#\" class=\"icon plus small\">添加</a>"
    if (type == 'del') {
      ac = "<a nav-id="+vo['id']+" href=\"#\" delete-nav class=\"icon plus small\">删除</a>"
    };
    var $li = $("<div nav-id="+vo['id']+" class=\"nav_li bck light\"><div>"+vo['name']+"</div>"+ac+"</div>");
    return $li;
  }
})  
</script>
</html>
